
<template>
  <div>
      <el-select :placeholder="mydataLabel" :style="{width: width}" clearable filterable @change="changevt" :disabled="optionflag == 0" :filter-method="filterMethodSqlSingle" ref="ddlDesignSelect" v-model="ddlvalue">
          <el-option :key="item.data" :label="item.display" :value="item.data" v-for="item in options">
          </el-option>
      </el-select>
  </div>
</template>
<script>
export default {
  props: ["width", "value", "sqlval", "optionflag"],
  data() {
      return {
          ddlvalue: this.value,
          mydataLabel: "请选择或输入文字查询",
          SqlSingleoptions: [],
          options: []
      };
  },
  computed: {},
  updated() {},
  methods: {
      loadAllData: function() {
          this.$tool
              .request({
                 // url: "MNG/MNG1/MNG132",
                  url: "ucent/ddl",
                  method: "post",
                  data: {
                      action: "DesignSelect",
                      sqlval: this.sqlval
                  }
              })
              .then(res => {
                  res.unshift({ data: "", display: "" });
                  this.SqlSingleoptions = res;
                  this.options = res;
              })
              .catch(e => {
                  console.log("error", e);
              });
      },
      changevt: function(evt) {
          this.ddlvalue = evt;
          this.$emit("change", evt);
      },
      filterMethodSqlSingle(query) {
          if (query) {
              //val存在
              this.options = this.SqlSingleoptions.filter(item => {
                  if (item.hasOwnProperty("inputcode")) {
                      if (!!~item.data.indexOf(query) || !!~item.display.indexOf(query) || (item.inputcode ? !!~item.inputcode.toUpperCase().indexOf(query.toUpperCase()) : false)) {
                          return true;
                      }
                  } else {
                      if (!!~item.data.indexOf(query) || !!~item.display.indexOf(query)) {
                          return true;
                      }
                  }
              });
          } else {
              //val为空时，还原数组
              this.options = this.SqlSingleoptions;
          }
      }
  },
  created() {
      this.loadAllData();
  }
};
</script>
<style scoped>
.el-main {
  padding: 0;
}
</style>
